<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200" />
      </v-col>

      <v-col class="mb-4">
        <h1 class="display-2 font-weight-bold mb-3">
          欢迎使用
        </h1>
        <strong>内测中，部分功能暂未实现，当前正在使用测试用户登录</strong>
        <p>基于Springboot3+Vue3开发的在线单词管理系统，支持单词查询，单词学习，批量导入单词，自定义单词，标签管理</p>
      </v-col>
      <v-col class="mb-5" cols="12">
        <h2 class="headline font-weight-bold mb-5">
          特点
        </h2>
        <v-row justify="center">
          <div class="subheading font-weight-regular">
            <br>与其他单 词学习APP（如百词斩）的不同点主要有以下方面：
            <ol>
              <li>
                将一个单词从多角度拆分，包括但不限于书写，语种，词性，音标，来源，源语种释义，翻译释义，词根词缀等，
                这么做的意义是方便整理和查找具有相同特性的单词，然后就可以做针对性地学习、排序。也正是因为对单词的共同属性进行拆分，
                所以理论上 支持世界上各种语言；
              </li>
              <li> 支持用户从多角度自定义单词自定义标签，自定义单词本，也可以复制现有单词，然后再对该单词做特殊处理； </li>
              <li>采用B/S架构，UI自适应手机、平板、电脑的屏幕，用户只需要一个浏览器就可以随时在不同平台学习</li>
            </ol>
          </div>
        </v-row>
      </v-col>

      <v-col class="mb-5" cols="12">
        <h2 class="headline font-weight-bold mb-5">
          相关链接
        </h2>
        <v-row justify="center">
          <a v-for="(link, i) in importantLinks" :key="i" :href="link.href" class="subheading mx-3" target="_blank">
            {{ link.text }}
          </a>
        </v-row>
      </v-col>

      <v-col class="mb-5" cols="12">
        <v-row justify="center">
          备案号：桂ICP备2025053001
        </v-row>
      </v-col>

      <!-- <v-col>
        <h2 class="headline font-weight-bold mb-5">
          更新历史
        </h2>
        <v-row justify="center">
          <v-card v-bind:key="item.verCode" v-for="item in updateHistory" :title="item.verTitle"
            :subtitle="item.verDescr">
            <ol>
              <li v-bind:key="index" v-for="changeItem, index in item.changeList">{{ changeItem.content }}</li>
            </ol>
          </v-card>
        </v-row>
      </v-col> -->
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'HelloWorld',

  data: () => ({
    ecosystem: [
      {
        text: 'vuetify-loader',
        href: 'https://github.com/vuetifyjs/vuetify-loader/tree/next',
      },
      {
        text: 'github',
        href: 'https://github.com/vuetifyjs/vuetify/tree/next',
      },
      {
        text: 'awesome-vuetify',
        href: 'https://github.com/vuetifyjs/awesome-vuetify',
      },
    ],
    importantLinks: [
      {
        text: 'Gitee',
        href: 'https://gitee.com/ExcellentLXQ',
      },
      {
        text: 'Vuetify',
        href: 'https://vuetifyjs.com/en/getting-started/installation/#installation',
      }
    ],
    whatsNext: [
      {
        text: 'Explore components',
        href: 'https://vuetifyjs.com',
      },
      {
        text: 'Roadmap',
        href: 'https://vuetifyjs.com/introduction/roadmap/',
      },
      {
        text: 'Frequently Asked Questions',
        href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
      },
    ],
    updateHistory: [
      {
        verCode: 1,
        verDate: '2024年3月1日',
        verType: 'shot',
        verName: 'v0.1',
        verTitle: '尝鲜版-0.1',
        verDescr: '新功能往这里看',
        changeList: [
          {
            type: 'text',
            content: '上架公共单词本'
          },
          {
            type: 'text',
            content: '支持单词听写、单项选择的学习方式'
          }
        ]
      }
    ]
  }),
}
</script>
